<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>高德地图自定义标记点示例</title>
    <!-- 引入高德地图JS API 2.0 -->

    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API密钥"
    ></script>
    <!-- 引入信息窗体插件 -->
    <script
      type="text/javascript"
      src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"
    ></script>

    <style>
      #mapContainer {
        width: 100%;
        height: 800px;
      }
      /* 添加自定义信息窗体内样式 */
      .custom-info-window h3 {
        color: white;
        margin-top: 0;
        border-bottom: 1px solid #2b6cb0;
        padding-bottom: 5px;
      }
      .custom-info-window p {
        color: white;
        margin: 5px 0;
      }
      .amap-info-content {
        background-color: #1a365d;
        border-radius: 24px;
        border: 2px solid #2b6cb0;
      }
      /* 适配2.0版本的信息窗体内边距 */
      .amap-popup-content {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="mapContainer"></div>

    <script>
      // 等待地图API加载完成
      window.onload = function () {
        // 初始化地图
        var map = new AMap.Map("mapContainer", {
          resizeEnable: true,
          viewMode: "3D", // 3D视图
          zoom: 13,
          center: [116.397428, 39.90923], // 北京坐标
        });

        // 添加地图缩放控件
        AMap.plugin(["AMap.ToolBar", "AMap.MapType"], function () {
          // 缩放控件
          var toolBar = new AMap.ToolBar({
            position: "LT", // 位置：左上角
            offset: new AMap.Pixel(10, 10), // 偏移量
          });
          map.addControl(toolBar);

          // 2D/卫星地图切换控件
          var mapType = new AMap.MapType({
            defaultType: 0, // 0: 2D地图，1: 卫星地图
            showRoad: true, // 卫星图上是否显示路网
            position: "RT", // 位置：右上角
          });
          map.addControl(mapType);
        });

        // 三种颜色：红色、黄色、绿色
        var colors = ["red", "yellow", "green"];

        // 生成10个不同位置的标记点
        var markers = [];
        var infoWindows = [];

        for (var i = 0; i < 10; i++) {
          // 随机生成在北京附近的坐标点
          var lng = 116.3 + Math.random() * 0.2;
          var lat = 39.9 + Math.random() * 0.2;

          // 随机选择颜色（三种颜色循环使用）
          var color = colors[i % 3];

          // 创建自定义标记点
          var marker = new AMap.Marker({
            position: [lng, lat],
            icon: new AMap.Icon({
              size: new AMap.Size(20, 20),
              image: `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="${color}"><circle cx="12" cy="12" r="10" stroke="black" stroke-width="1"/></svg>`,
              imageSize: new AMap.Size(20, 20),
            }),
            offset: new AMap.Pixel(-10, -10),
            title: `标记点${i + 1}`,
          });

          // 添加到地图
          marker.setMap(map);
          markers.push(marker);

          // 创建信息窗体
          var infoWindow = new AMap.InfoWindow({
            content: `<div class="custom-info-window">
                                <h3>资产详细信息</h3>
                                <p>ID：FT11233</p>
                                <p>尺寸：75寸</p>
                                <p>位置: [${lng.toFixed(6)}, ${lat.toFixed(
              6
            )}]</p>
                                <p>资产类型：显示器</p>
                                <p>详情 &gt; </p>
                              </div>`,
            offset: new AMap.Pixel(0, -30),
          });
          infoWindows.push(infoWindow);

          // 绑定点击事件
          (function (index) {
            marker.on("click", function () {
              infoWindows[index].open(map, markers[index].getPosition());
            });
          })(i);
        }

        // 调整地图视野以显示所有标记点
        map.setFitView();
      };
    </script>
  </body>
</html>
